<template>
  <el-row :gutter="0" class="container">
    <el-col :span="24" :offset="0" class="home-banner-box">
      <a :href="getFullPath(props.banner.hrefUrl)">
        <img
          class="good-banner-img"
          :src="props.banner.imageUrl"
          loading="lazy"
          alt="banner"
        />
      </a>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  import { BannerListType } from "../../../types/Shop";
  import { getFullPath } from "@/utils/path";
  const props = withDefaults(defineProps<{ banner: BannerListType }>(), {
    banner: () => ({
      hrefUrl: "",
      imageUrl: "",
    }),
  });
</script>

<style lang="scss" scoped>
  .container {
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
  }

  .home-banner-box {
    height: 120px;
    margin: 22px 0;
    overflow: hidden;
  }

  .good-banner-img {
    width: 1226px;
    aspect-ratio: auto 1226 / 120;
    height: 120px;
  }
</style>
